import React,{useState,useEffect,useRef} from 'react';
import {Button,Modal, Space, Table} from "antd";
import Axios from "../../util/axios"
import AddTabWhole from "./ADDTabWhole";

function TabWholesale(props) {
    const [dataSource,setdataSource] =useState([]);
    const columns = [
        {
            title: '行号',
            dataIndex: 'lineNumber',
            key: 'lineNumber'
        },
        {
            title: '成色',
            dataIndex: 'chengse',
            key: 'chengse'
        },
        {
            title: '款式',
            dataIndex: 'style',
            key: 'style'
        },
        {
            title: '基本工费',
            dataIndex: 'basicLaboCost',
            key: 'basicLaboCost'
        },
        {
            title: '其他工费',
            dataIndex: 'otherLaboCost',
            key: 'otherLaboCost'
        },
        {
            title: '损耗',
            dataIndex: 'loss',
            key: 'loss'
        },
        {
            title: '微镶损耗',
            dataIndex: 'microLoss',
            key: 'microLoss'
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            align:'center',
            render: ()=>{
                return(
                    <Space>
                        <Button size="small" type="primary" >编辑</Button>
                        <Button  size="small" type="danger">删除</Button>
                    </Space>
                )
            }
        }
    ];

    //页面显示
    const displayWhole =() =>{
        Axios.get("/Wholesale").then(res =>{
            setdataSource(res.data.data)
        })
    }
     useEffect(() =>{
         displayWhole();
     },[]);

    //添加按钮
    const [isAddvisible,setisAddvisible] =useState(false);
    const addFromWholesale =useRef(null);
    const addFromWholesaleOk =() =>{
        addFromWholesale.current.validateFields().then(value => {
            setisAddvisible(false);
            //添加后重置
            addFromWholesale.current.resetFields();
            //post到后端，生成id，再设置DataSource，方便后面删除和更新
            Axios.post("/addWholesale",{...value})
                .then(res =>{
                    console.log(res)
                    setdataSource([...dataSource,res.data.data])
                    displayWhole();
                })
        }).catch(err =>console.log(err))
    }
    return (
        <div>
            <div className="CodeHead"> 批发销售工费管理</div>
            <div>
                <Button type="primary" onClick={() =>{
                    setisAddvisible(true)
                }} >增加工费</Button>
                <Table
                    rowSelection={{
                        type: 'checkbox'
                    }}
                    dataSource={dataSource}
                    columns={columns}
                    pagination={{pageSize:3}}
                    scroll={{y:240}}
                    rowKey="lineNumber"
                />
                <Modal
                    visible={isAddvisible}
                    title="新增工费"
                    okText="确定"
                    cancelText="取消"
                    onCancel={() =>{
                        setisAddvisible(false)
                    }}
                    onOk={()=>addFromWholesaleOk()}
                >
                    <AddTabWhole ref={addFromWholesale}></AddTabWhole>
                </Modal>
            </div>
        </div>
    );
}

export default TabWholesale;